<template>
  <div class="frame">
    <slot name="header">
      <div class="frame__header">
        <div class="frame__header__item left">{{ title }}</div>
        <div
          v-if="isShowHeaderRight"
          class="frame__header__item right"
          @click="() => $emit('onFrameRightClick')"
        >
          <slot name="headerRight"><span>更多</span><Icon name="arrow" size="16px" /> </slot>
        </div>
      </div>
    </slot>
    <div class="frame__body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { Icon } from 'vant'

export default defineComponent({
  name: 'Frame',
  components: { Icon },
  props: {
    title: {
      type: String,
      default: '',
      required: true
    },
    isShowHeaderRight: {
      type: Boolean,
      default: true
    }
  }
})
</script>

<style lang="less" scoped>
.frame {
  border-radius: 20px;
  overflow: hidden;

  .frame__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #eee;

    .frame__header__item {
      display: flex;

      &.right {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        border-radius: 20px;
        border: 1px solid #eee;
        padding: 2px 4px;

        span {
          padding-left: 4px;
        }
      }
    }
  }

  .frame__body {
    padding: 12px;
  }
}
</style>
